<template>
    <div class="input-item file-item" v-if="edit" @dragenter.prevent @dragover.prevent @dragleave.prevent @drop.prevent="dropFile">
      <div class="file-name">
          <span class="name">{{filename}}</span>
          <span class="extension">{{extension}}</span>
      </div>
      <button type="button" class="button button-theme btn btn-block btn-default" @click="chooseFile">
          <span class="fa fa-paperclip"></span>
          附件
      </button>
      <input type="file" :name="name" :accept="accept" v-el:input @change="fileChange($event.target.files[0] || null)">
    </div>
  <div class="form-group" v-else>
    <label :for="id" class="control-label" :class="colSm">{{title}}：</label>
    <div class="col-sm-{{right}}">
      <div class="input-item file-item" @dragenter.prevent @dragover.prevent @dragleave.prevent @drop.prevent="dropFile">
        <div class="file-name">
            <span class="name">{{filename}}</span>
            <span class="extension">{{extension}}</span>
        </div>
        <button type="button" class="button button-theme btn btn-block btn-default" @click="chooseFile">
            <span class="fa fa-paperclip"></span>
            附件
        </button>
        <input type="file" :name="name" :accept="accept" v-el:input @change="fileChange($event.target.files[0] || null)">
      </div>
    </div>


  </div>
</template>

<script>
import {randomId} from "./general";

export default {
  data: () => ({
        id:randomId(),
        filename: "",
        extension: ""
    }),
    props: {
        title:{type:String},
        name: String,
        value: {type: String, twoWay: false, default: ""},
        required: {type: Boolean, default: false},
        accept: {type: String, default: "*"},
        edit:{type:Boolean, default:false},
        left: {type: String,default: 2}
    },
    computed: {
        value() {
            return this.filename + this.extension;
        },
        file: {
            cache: false,
            get() {
                return this.$options.file;
            }
        },
        colSm() {
            if (!this.upTable) {
                return "col-sm-" + this.left
            } else {
                return ""
            }
        },
        right() {
            return 12 - this.left
        },
    },
    methods: {
        dropFile(event) {
            var file = event.dataTransfer.files[0];
            var accept_regex = new RegExp("^" + this.accept.replace("*", ".*") + "$");
            if (file && accept_regex.test(file.type)) {
                this.fileChange(file);
            }
        },
        chooseFile() {
            this.$els.input.click();
        },
        fileChange(file) {
            this.$options.file = file;
            var file_name = file ? file.name : "";
            console.log(file_name)
            var last_dot = file_name.lastIndexOf(".");
            if (last_dot > 0) {
                this.filename = file_name.slice(0, last_dot);
                this.extension = file_name.slice(last_dot);
            }else {
                this.filename = file_name;
                this.extension = "";
            }
        },
        reset() {
            this.$els.input.value = "";
            this.fileChange(null);
        }
    },
    file: null
}
</script>

<style lang="less">
form .input-item.file-item {
    display: flex;

    > .file-name {
        display: flex;
        flex: 1;
        padding-left: 6px;
        padding-right: 6px;
        border: 1px solid #ccc;
        border-right: none;
        line-height: 30px - 2px;
         > .name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    > button {
        flex: 0 0 69px;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    > input[type="file"] {
        display: none;
    }
}

</style>
